<template>
  <div class="interview-report-manage-page">
    <a-card :bordered="false">
      <h2>面试报告管理</h2>

      <!-- 搜索表单 -->
      <a-form
        :model="searchParams"
        layout="inline"
        class="search-form"
        @finish="handleSearch"
      >
        <a-form-item label="面试岗位" name="interviewType">
          <a-select
            v-model:value="searchParams.interviewType"
            placeholder="请选择岗位"
            style="width: 200px"
            allowClear
          >
            <a-select-option value="Java开发工程师">Java开发工程师</a-select-option>
            <a-select-option value="Web前端开发工程师">Web前端开发工程师</a-select-option>
            <a-select-option value="测试工程师">测试工程师</a-select-option>
            <a-select-option value="PHP工程师">PHP工程师</a-select-option>
          </a-select>
        </a-form-item>



        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 数据表格 -->
      <a-table
        :columns="columns"
        :data-source="dataList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
        class="data-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'userId'">
            <a-tag color="blue">{{ record.userId }}</a-tag>
          </template>
          <template v-else-if="column.key === 'interviewScore'">
            <a-tag :color="getScoreColor(record.interviewScore)">
              {{ record.interviewScore || 0 }}分
            </a-tag>
          </template>
          <template v-else-if="column.key === 'createTime'">
            {{ formatTime(record.createTime) }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="viewReport(record.id)">
                查看详情
              </a-button>
              <a-popconfirm
                title="确定要删除这条面试报告吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteRecord(record.id)"
              >
                <a-button type="link" danger size="small">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import {
  listInterviewReportVoByPageByAdmin,
  deleteReportByAdmin,
} from '@/api/interviewReportController'

const router = useRouter()

// 搜索参数
const searchParams = reactive({
  interviewType: undefined,
  userId: undefined,
})

// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },

  {
    title: '面试岗位',
    dataIndex: 'interviewType',
    key: 'interviewType',
  },
  {
    title: '面试时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '综合评分',
    dataIndex: 'interviewScore',
    key: 'interviewScore',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
  },
]

// 数据
const loading = ref(false)
const dataList = ref<any[]>([])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
})

// 加载数据
const loadData = async () => {
  try {
    loading.value = true
    const res = await listInterviewReportVoByPageByAdmin({
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
      ...searchParams,
    })

    if (res.data.code === 0 && res.data.data) {
      dataList.value = res.data.data.records || []
      pagination.value.total = res.data.data.totalRow || 0
    } else {
      message.error('加载数据失败：' + res.data.message)
    }
  } catch (error) {
    message.error('加载数据失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  loadData()
}

// 重置
const handleReset = () => {
  searchParams.interviewType = undefined
  searchParams.userId = undefined
  pagination.value.current = 1
  loadData()
}

// 表格分页变化
const handleTableChange = (pag: any) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  loadData()
}

// 查看报告
const viewReport = (id: number) => {
  router.push(`/interview/report/${id}`)
}

// 删除记录
const deleteRecord = async (id: number) => {
  try {
    const res = await deleteReportByAdmin({ id })
    if (res.data.code === 0) {
      message.success('删除成功')
      loadData()
    } else {
      message.error('删除失败：' + res.data.message)
    }
  } catch (error) {
    message.error('删除失败')
    console.error(error)
  }
}

// 获取分数颜色
const getScoreColor = (score: number) => {
  if (score >= 90) return 'green'
  if (score >= 75) return 'blue'
  if (score >= 60) return 'orange'
  return 'red'
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-'
  // 格式化时间显示为 YYYY-MM-DD HH:mm
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.interview-report-manage-page {
  padding: 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 8%, #e2e8f0 20%, #cbd5e1 100%),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  min-height: calc(100vh - 64px);
}

:deep(.ant-card) {
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

:deep(.ant-card-head) {
  border-bottom: 2px solid #f0f0f0;
}

:deep(.ant-card h2) {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.search-form {
  margin: 24px 0;
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8edf2 100%);
  border-radius: 12px;
  border: 1px solid #e8edf2;
}

:deep(.search-form .ant-form-item) {
  margin-bottom: 0;
}

:deep(.search-form .ant-select),
:deep(.search-form .ant-input) {
  border-radius: 8px;
}

:deep(.search-form .ant-btn) {
  border-radius: 8px;
  height: 32px;
  font-weight: 500;
}

:deep(.search-form .ant-btn-primary) {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
}

.data-table {
  margin-top: 24px;
}

:deep(.ant-table) {
  border-radius: 8px;
}

:deep(.ant-table-thead > tr > th) {
  background: #f5f7fa;
  font-weight: 600;
  color: #333;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: #f5f7fa;
}

:deep(.ant-btn-link) {
  font-weight: 500;
}

@media (max-width: 768px) {
  .interview-report-manage-page {
    padding: 16px;
  }

  .search-form {
    padding: 16px;
  }
}
</style>

